<template>
  <div>
    <van-card
        v-for="user in props.userList"
        :tag="user.gender === 0 ? '男' : '女'"
        :title="user.username"
        :desc="user.profile"
        :thumb="user.avatarUrl"
        id="userCard"
    >
      <template #tags>
        <van-tag round type="primary" size="medium" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 7px;margin-bottom: 7px">
          {{tag}}
        </van-tag>
      </template>
      <template #footer>
        <van-button plain
                    size="small"
                    @click="popUpDetailedUserInfo(user)"
                    type="primary"
                    id="contactMeButton"
                    v-if="user.id !== currentUser?.id"
        >
          <van-icon name="fire-o" color="#EE0A24" id="contactMeIcon"/>
          了解我
        </van-button>
        <van-button plain
                    round
                    size="small"
                    type="success"
                    id="myselfButton"
                    v-if="user.id === currentUser?.id"
        >
          这个人是你自己
        </van-button>
      </template>
    </van-card>
  </div>
</template>

<script setup lang="ts">

import { UserType } from "../models/user";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";

interface UserCardListProps {
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  // @ts-ignore
  userList: [] as UserType[],
})

// 当前登录用户
const currentUser = ref();

// 获取当前用户
onMounted (async () => {
  currentUser.value = await getCurrentUser();
})

// 弹出框标识
const showPopUp = ref(false);
// UserCardList向父组件Index传值
const emit = defineEmits(['popUp','popUser'])

/**
 * 弹出详细伙伴信息
 */
const popUpDetailedUserInfo = (user) => {
  showPopUp.value = true;
  emit('popUp', showPopUp.value)
  emit('popUser', user)
  showPopUp.value = false;
}
</script>

<style scoped>
#userCard {
  --van-card-thumb-radius: 50%;
}
#contactMeButton {
  font-size: 15px;
  opacity: 78%;
  --van-button-border-width: 1.5px;
  margin-top: 8px;
}
#contactMeIcon {
  font-size: 15px;
}
#myselfButton{
  font-size: 15px;
  margin-top: 8px;
}
</style>